<template>
	<el-row id="container">

		<el-col :span="24" id="outter_container">
			<el-col :span="24" id="blocktc">
				<div id="tcontainer">
					<i id="blockicon"></i>
					<span id="blockt">区块详情</span>
				</div>
			</el-col>

			<el-col :span="24" id="MEblocksinfo">
				<div class="MEblocksinfotable" v-for="d in tableData">
					<label class="MEblockkey">{{d.mkey[0]}}</label>
					<!-- <label class="MEblocktime">{{timeformatter(d.mineTime)}}</label> -->
					</br>
					<label class="MEblockvalue" v-bind:class="textObject(d.mkey)" v-on:click="route2other(d)">{{show(d)}}</label>
				</div>
			</el-col>

		</el-col>
		<el-col :span="24" id="MEoutter_container" v-bind:class="txNum()">

				<el-col :span="24" id="MEtxinfo">

					<div class="MEtabletitle">
						<span class="MEtitle">交易列表</span>
					</div>

					<el-col :span="24" id="MEtxtable">
						<div class="MEtxsinfotable" v-for="d in txtableData" v-on:click="txreaddetail(d)">
							<span class="MEtxtype">{{d.type}}</span>
							<label class="MEmarket">{{d.extra.marketName}}</label>
							</br>
							<label class="MEtxhash">{{d.mark}}</label>
							<label class="MEtxtime">{{timeformatter(d.time)}}</label>
						</div>
					</el-col>

				</el-col>

				<el-col :span="24" id="MEpaging">
					<el-pagination id="MEpagingc" :page-size="7" small background @current-change="handleCurrentChange" layout="prev, pager, next" :total="total"></el-pagination>
				</el-col>

			</el-col>
		<MEFooter class="f"></MEFooter>

	</el-row>
</template>

<script>
	import MEFooter from '../MEcomponents/MEfooter.vue'

	export default {

		components: { 
			MEFooter 
		},

		data () {
			return {
				cblockdetail: "",
				cloadbus: false,
				tableData: [],
				txtableData: [],
				txde: [],
				currentPage: 1,
				total: 0,
				fflag: 1,
				txsflag: 1,
				txlist: []
			}
		},

		created () {
			eventBus.$on('blockdetail',blockdetail => {
				//异步接收数据，若第一次加载该页面则blockdetail应不为空
				if (blockdetail != "" && blockdetail != undefined) {
					this.cloadbus = true
					window.localStorage.setItem(this.$route.params.id,JSON.stringify(blockdetail))
					this.setData(blockdetail.data)
					this.settxData(blockdetail.data)
					this.cblockdetail = blockdetail
				}  else if (blockdetail === undefined) {

				}
			})

		},

		mounted () {
			if (this.cloadbus === false) {
				// this.cmount = true
				let s = this.$route.params.id
				this.cblockdetail = JSON.parse(window.localStorage[s])
				this.setData(this.cblockdetail.data)
				this.settxData(this.cblockdetail.data)
			}
			eventBus.$off('blockdetail')
		},

		beforeRouteUpdate(to,from,next){
			this.tableData = []
			this.cblockdetail = JSON.parse(window.localStorage.getItem(to.params.id))
			this.setData(this.cblockdetail.data)
			this.fflag = 1
			this.total = 0
			this.settxData(this.cblockdetail.data)
			next()
		},

		destroyed () {
			eventBus.$emit('txdetail',this.txlist)
		},

		methods: {

			show (s) {
				var mv = s.mvalue[0];
				if (s.mkey[0] === "区块ID：" || s.mkey[0] === "前一区块：") {
			        var re= '';
			        var length = mv.length;
			        for (var i = 0,j=1; i < length; i++,j++) {
			            if (j&&j % 44 == 0) {
			                re += ' \n ';
			            } else {
			                re += mv[i];
			            }
			        }
			        return re;
			    } else {
			    	return mv;
			    }
		    },

			route2other (d) {
				if(d.mkey[0].toString()==="前一区块：")
				{
					let param = {hash:d.mvalue[0].toString()}
					this.$api.post('blockchain/block', param, r => {
						// this.tableData = []
						// this.cblockdetail = r
						window.localStorage.setItem(JSON.stringify(r.data.hash),JSON.stringify(r))
						// this.setData(this.cblockdetail.data)
						this.$router.push(`/MEblocks/${JSON.stringify(r.data.hash)}`)
					})
				}
			},

			setData (blockdetail) {
				let temparray = []
				let temphash = {mkey:[],mvalue:[]}

				for( let p in blockdetail) {
					temphash = {mkey:[],mvalue:[]}

					if (p==="mineTime")
					{
						let date
						if(blockdetail[p].toString().length===10)
						{
							date = new Date(blockdetail[p] * 1000)
						} else {
							date = new Date(blockdetail[p])
						}
						let a = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
						function paddNum(s) {
							s += ""
							return s.replace(/^(\d)$/,"0$1");
						}
						let h = paddNum(date.getHours());
						let m = paddNum(date.getMinutes());
						let s = paddNum(date.getSeconds());
						a = a + " " + h + ":" + m + ":" + s
						if (date.getHours() < 12) {
							a = a + " AM"
						} else {
							a = a + " PM"
						}
						temphash["mvalue"].push(a)
					} else if (p==="size") {
						let a = blockdetail[p] + " Bytes"
						temphash["mvalue"].push(a)
					} else {
						temphash["mvalue"].push(blockdetail[p].toString())
					}

					if (p==="txs") {
						if(blockdetail[p] === 0) {
							this.txsflag = 0
						} else {
							this.txsflag = 1
						}
					}

					switch(p)
					{
						case "number": p="序号："; break;
						case "mineTime": p="时间："; break;
						case "hash": p="区块ID："; break;
						case "preHash": p="前一区块："; break;
						case "size": p="大小："; break;
						case "txs": p="交易数："; break;
					}

					temphash["mkey"].push(p)
					this.tableData.push(temphash)
				}
			},

			textObject: function (d) {
				return {
					'text-highlight': d[0] === "前一区块：",
					'mtxex': d[0] === "区块ID："
				}
			},

			txNum: function () {
				return {
					'txnum0': this.txsflag === 0,
					'txnumnot0': this.txsflag != 0
				}
			},

			timeformatter: function (d) {
				let date
				let temp = d
				if(temp.toString().length===10)
				{
					date = new Date(temp * 1000)
				} else {
					date = new Date(temp)
				}
				let a = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
				function paddNum(s) {
					s += ""
					return s.replace(/^(\d)$/,"0$1");
				}
				let h = paddNum(date.getHours());
				let m = paddNum(date.getMinutes());
				let s = paddNum(date.getSeconds());
				a = a + " " + h + ":" + m + ":" + s
				return a;
			},
			//跳转到交易详细信息页面
			txreaddetail (d) {

				let param = {
					txHash:d.txHash
				}

				this.$api.post('blockchain/tx', param, r => {
					this.txlist = r
					this.$router.push(`/MEtransactions/${JSON.stringify(r.data.txHash)}`)
				})

			},

			settxData (d) {
				let param = {number:d.number}
				if (this.fflag === 1){
					// sleep(1000)
					this.$api.post('blockchain/txsOfBlock', param, r => {
						this.txde = r.data
						this.fflag = 0
						if (this.total === 0) {
							this.total = r.data.length
						}
						this.txde.forEach(function(i,index) {
							let a
							switch (i.type) {
								case "RetailInfo": a="零售单"; i["type"]=a; break;
								case "SaleInfo" : a="销售单"; i["type"]=a; break;
								case "PurchaseInfo" : a="进货单"; i["type"]=a; break;
								case "ReceiveInfo" : a="收货单"; i["type"]=a; break;
								case "AccessCertificate" : a="准入证明"; i["type"]=a; break;
								case "Market" : a="市场检查表"; i["type"]=a; break;
								case "Gov" : a="日常检查表"; i["type"]=a; break;
								default : console.log("haven't such type"); break;
							}
						})
						if (this.txtableData.length != 0) {
							let e = this.txtableData.length
							for (let i=1;i<=e;i++){
								this.txtableData.pop()
							}
						}
						
						let s = (this.currentPage - 1) * 7 + 1
						let q = 0
						if ((s+6)>this.total) {
							q = this.total
						} else {
							q = s + 6
						}
						for(let i = 1;i <= q; i++){
							this.txtableData.push(this.txde[i - 1])
						}
					})
				} else {
					let e = this.txtableData.length
					for (let i=1;i<=e;i++){
						this.txtableData.pop()
					}
					
					let s = (this.currentPage - 1) * 7 + 1
					let q = 0
					if ((s+6)>this.total) {
						q = this.total
					} else {
						q = s + 6
					}
					for(let i = s;i <= q; i++){
						this.txtableData.push(this.txde[i - 1])
					}
				}
			},

			handleCurrentChange(val){
              this.currentPage = val
              this.settxData(this.cblockdetail.data)
            }
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

	.f {
		position: fixed;  
    	bottom: 0;  
	}

	#container {
		position: absolute;
		margin-top: 0px;
		margin-bottom: 0px;
		/*height: 13rem;*/
		width: 100%;
		/*overflow-y: auto;*/
		box-sizing: border-box;
		background-color: rgb(248, 248, 248);
	}

	#outter_container {
		height: 9rem;
		/*margin-top: 0.3rem;*/
		overflow: hidden;
	}

	#blocktc {
		/*height: 1rem;*/
		background-color: #fff;
		/*border-bottom: solid 0.01rem rgba(179,179,179,0.50);*/
		padding: 0 0.1rem;
	}

	#tcontainer {
		height: 1rem;
		border-bottom: solid 0.01rem rgba(179,179,179,0.50);
	}

	#blockicon {
		float: left;
		width: 0.53rem;
		height: 0.43rem;
		position: relative;
		/*margin:0 auto;*/
		top: 50%;
		margin-top: -0.22rem;
		margin-left: 0.05rem;
		/*margin-top: 0.26rem;*/
		/*line-height: 1rem;*/
		background-image:url('../assets/icon_block_small.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
	}

	#blockt {
		float: left;
		line-height: 1rem;
		font-size: 0.35rem;
		margin-left: 0.07rem;
	}

	#MEblocksinfo {
		background-color: #fff;
		padding: 0 0.1rem;
	}

	.MEblocksinfotable {
		box-shadow: 0 0 0.02rem 0 rgba(179,179,179,0.50);
		width: 100%;
		border-bottom: solid 0.01rem rgba(179,179,179,0.50);
		display: inline-block;
	}

	.MEblockkey {
		float: left;
		font-size: 0.3rem;
		margin-left: 0.2rem;
		margin-top: 0.15rem;
		color: #262626;
	}

	.MEblockvalue {
		float: left;
		position: relative;
		margin-top: -0.56rem;
		height: 0.5rem;
		line-height: 0.5rem;
		margin-left: 0.25rem;
		font-size: 0.28rem;
		color: #737373;
	}

	.text-highlight {
		color: #1DB2BF;
		font-size: 0.25rem;
		margin-top: -0.46rem;
		height: 0.87rem;
		line-height: 0.37rem;
	}

	.mtxex {
		/*display: block;*/
		font-size: 0.25rem;
		margin-top: -0.46rem;
		height: 0.87rem;
		line-height: 0.37rem;
	}

	.txnum0 {
		display: none;
	}

	.txnumnot0 {
		display: block;
	}

	#MEpaging>>>.btn-prev{
		height: 0.44rem;
		min-width: 0.44rem;
	}

	#MEpaging>>>.number {
		height: 0.44rem;
		min-width: 0.44rem;
		line-height: 0.44rem;
		font-size: 0.24rem;
	}

	#MEpaging>>>.el-icon-more {
		height: 0.44rem;
		min-width: 0.44rem;
		line-height: 0.44rem;
		font-size: 0.24rem;
	}

	#MEpaging>>>.el-icon-d-arrow-right {
		height: 0.44rem;
		min-width: 0.44rem;
		line-height: 0.44rem;
		font-size: 0.24rem;
	}

	#MEpaging>>>.el-icon-d-arrow-left {
		height: 0.44rem;
		min-width: 0.44rem;
		line-height: 0.44rem;
		font-size: 0.24rem;
	}

	#MEpaging>>>.btn-next{
		height: 0.44rem;
		min-width: 0.44rem;
	}

	#MEoutter_container {
		height: 10.3rem;
		/*margin-top: 4.5px;*/
	}

	.MEtabletitle {
		height: 0.7rem;
		width: 96%;
		margin-left: 2%;
		margin-bottom: 0.1rem;
		border-radius: 0.05rem;
		display: block;
		color: #262626;
	}

	.MEtitle {
		float: left;
		font-size: 0.33rem;
		color: #737373;
		line-height: 0.7rem;
		/*margin-top: 0.12rem;*/
		margin-left: 0.04rem;
	}

	#MEtxinfo {
		border-radius:0.1rem;
		height: 8.8rem;
		width: 100%;
		margin-top: 0.03rem;
	}

	#MEtxtable {
		height: 8rem;
		width: 100%;
		overflow: hidden;
	}

	.MEtxsinfotable {
		box-shadow: 0 0.01rem 0.02rem 0 rgba(179,179,179,0.50);
		height: 1.1rem;
		width: 100%;
		background-color: rgb(255,255,255);
		border-bottom: solid 0.01rem rgba(179,179,179,0.50);
	}

	.MEtxtype {
		float: left;
		font-size: 0.3rem;
		margin-left: 0.2rem;
		margin-top: 0.13rem;
		color: #262626;
	}

	.MEmarket {
		float: right;
		font-size: 0.23rem;
		margin-right: 0.2rem;
		margin-top: 0.18rem;
		color: #262626;

		width: 30%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.MEtxhash {
		float: left;
		position: absolute;
		margin-top: -0.45rem;
		margin-left: 0.25rem;
		font-size: 0.23rem;
		color: #737373;
	}

	.MEtxtime {
		float: right;
		font-size: 0.23rem;
		color: #737373;
		margin-top: -0.45rem;
		margin-right: 0.27rem;
	}
	
	#MEpaging {
		text-align: center;
		width: 100%;
		height: 1.8rem;
	}

	#MEpagingc {
        height: 0.6rem;
	}

</style>